<template>
	<view class="shopList">
		<view class="title" :style="{'height': navHeight+statusBarHeight + 'px'}">
			<text class="iconfont iconhuaban73" @tap="$emit('close')"></text>
			<view class="serch">
				<text class="iconfont iconhuaban18" @tap="getProduct()"></text>
				<input type="text" v-model="keyword" confirm-type="search" @confirm="getProduct()"
					placeholder="搜索品牌或商品名称" />
			</view>
		</view>
		<cl-filter-bar @change="onChange()">
			<!-- 多选下拉 -->
			<cl-filter-item v-model="priceData.val" label="综合" :options="priceData.list" type="dropdown" prop="zh">
			</cl-filter-item>
			<!-- 升序，降序 -->
			<text class="cl-filter-item" :class="{'active':priceData.val==='sale'}" @tap="changeSale">销量</text>
			<!-- 筛选 -->
			<view class="cl-filter-item" @tap="filterShow=true">
				<text>筛选</text>

			</view>
			<!-- <cl-filter-item  v-model="filter" label="筛选" type="switch"></cl-filter-item> -->
		</cl-filter-bar>
		<view class="shopItem">
			<scroll-view scroll-y="true" @scrolltolower="scrolltolower">
				<view class="cell" v-for="(item,index) in goodsData.data" :key="index">
					<view class="col-1">
						<image :src="item.main_imgurl"></image>
					</view>
					<view class="col-2">
						<view class="row-1">{{ item.product_title }}</view>
						<view class="row-2">{{item.cate_name}}</view>
						<view class="row-3">
							<text>{{ item.volume }}人付款</text>
							<text class="o_price">￥{{ item.primary_price }}</text>
							<text class="n_price">￥{{ item.price }}</text>
						</view>
					</view>
					<view class="col-3" @tap="$emit('sendPopupMsg',item,'goods');$emit('close')">
						<text class="iconfont iconhuaban64"></text>
						<text>发送</text>
					</view>
				</view>
				<view class="tips" v-if="goodsData.noMore">没有更多了！</view>
			</scroll-view>
		</view>
		<u-popup v-model="filterShow" mode="right" width="90%" height="100%">
			<view class="screenRight" :style="{'margin-top': navHeight+statusBarHeight + 'px'}">
				<view class="price">价格区间（元）</view>
				<view class="c_cPrice">
					<input type="number" v-model="minPrice" placeholder="最低价" />
					<text></text>
					<input type="number" v-model="maxPrice" placeholder="最高价" />
				</view>
				<view class="brand">
					<text class="row-1">品牌</text>
					<text class="row-2" @tap="filterShow1=true">更多品牌 ></text>
				</view>
				<view class="brandList">
					<text :class="store_id.indexOf(item.store_id)!==-1?'active':''"
						v-for="(item,index) in brandLstData.pushStore" :key="index" v-if="index<15"
						@tap="changeStoreId(item.store_id)">
						{{ item.store_name }}</text>
				</view>
				<view class="brand">
					<view class="row-1">品类</view>
					<!-- <view class="row-2">更多 ></view> -->
				</view>
				<view class="brandList">
					<text :key="index" v-if="item.is_show==1" @tap="changeCateOne_id(item.cate_id)"
						:class="cateOne_id.indexOf(item.cate_id)!==-1?'active':''" v-for="(item,index) in cateLstData">
						{{ item.cate_name }}</text>
				</view>
				<view class="brandBtnBox">
					<view class="b1" @tap="resetData()">重置</view>
					<view class="b2" @tap="confirmData()">确认</view>
				</view>
			</view>
			<u-popup v-model="filterShow1" mode="right" width="90%" height="100%">
				<view class="brandDrawerBody">
					<view class="brandDrawerTitle" :style="{'line-height': navHeight+statusBarHeight + 'px'}">全部品牌
					</view>
					<view class="letterBox">
						<view @click="changeScroll(letter)" v-for="(letter,index) in sortListData" :key="index">
							{{ letter }}
						</view>
					</view>
					<scroll-view class="brandListBox" :scroll-into-view="brandInto" scroll-y="true" id="brandListBox">
						<view class="brandList" :id="`letter${letter}`" v-for="(letter,index) in sortListData"
							:key="index">
							<view class="letter">{{ letter }}</view>
							<view class="brandBox" @click="changeStoreId(item.store_id)"
								v-for="(item,index) in brandLstData.LstStore" v-if="item.sort===letter" :key="index">
								<view class="icon" :class="store_id.indexOf(item.store_id)!==-1?'active':''">√</view>
								<image :src="item.store_logo" alt=""></image>
								<text>{{ item.store_name }}</text>
							</view>
						</view>
					</scroll-view>
					<view class="brandBtnBox">
						<view class="b1" @click="store_id = []">重置</view>
						<view class="b2" @click="confirmData()">确认</view>
					</view>
				</view>
			</u-popup>
		</u-popup>
	</view>
</template>

<script>
	import customeApi from '@/service/custome.js'
	import clFilterBar from "../components/cl-uni/components/cl-filter-bar/cl-filter-bar.vue"
	import clFilterItem from "../components/cl-uni/components/cl-filter-item/cl-filter-item.vue"

	export default {
		data() {
			return {
				brandInto: '',
				filterShow: false,
				filterShow1: false,
				order_sale: false,
				screenShow: false,
				brandShow: false,
				cateShow: false,
				keyword: '',
				priceData: {
					list: [{
						value: 'mix',
						label: '综合排序'
					}, {
						value: 'parced',
						label: '价格降序'
					}, {
						value: 'price',
						label: '价格升序'
					}],
					val: ''
				},
				brandLstData: {},
				cateLstData: [],
				minPrice: '',
				maxPrice: '',
				store_id: [], //品牌ID
				cateOne_id: [], //品牌ID
				sortListData: [],
				goodsData: {
					store_id: [],
					cateOne_id: [],
					loading: false,
					noMore: false,
					status: 1,
					data: [],
					page: 1,
					pagesize: 10,
					total: ''
				},
			}
		},
		components: {
			clFilterBar,
			clFilterItem
		},
		computed: {
			navHeight() {
				return this.$store.state.system.navBarHeight
			}, // Nav栏高度
			statusBarHeight() {
				let systemInfo = uni.getSystemInfoSync()
				return systemInfo.statusBarHeight || 0
			}
		},
		created() {
			this.getProduct();
			this.getBrandList();
			this.getCateLst()
		},
		methods: {
			onChange() {
				this.goodsData.page=1;
				this.getProduct()
			},
			changeScroll(letter) {
				this.$nextTick(() => {
					this.brandInto = "letter" + letter
				});
				this.brandInto = '';
			},
			changeCateOne_id(id) {
				let num = this.cateOne_id.indexOf(id)
				if (num !== -1) {
					this.cateOne_id.splice(num, 1)
				} else {
					this.cateOne_id.push(id)
				}
			},
			changeCateOne_id(id) {
				let num = this.cateOne_id.indexOf(id)
				if (num !== -1) {
					this.cateOne_id.splice(num, 1)
				} else {
					this.cateOne_id.push(id)
				}
			},
			confirmData() {
				this.goodsData.store_id = this.store_id;
				this.goodsData.cateOne_id = this.cateOne_id;
				this.goodsData.page = 1;
				this.getProduct();
				this.filterShow = false;
				this.filterShow1 = false;
			},
			resetData() {
				this.minPrice = '';
				this.maxPrice = '';
				this.store_id = [];
				this.cateOne_id = [];
				this.goodsData.store_id = this.store_id;
				this.goodsData.cateOne_id = this.cateOne_id;
				this.goodsData.page = 1;
			},
			changeSale() {
				this.priceData.val = 'sale';
				this.getProduct();
			},
			changeStoreId(id) {
				let num = this.store_id.indexOf(id)
				if (num !== -1) {
					this.store_id.splice(num, 1)
				} else {
					this.store_id.push(id)
				}
			},
			scrollEvent(e) {
				if (this.goodsData.noMore) {
					return false;
				}
				this.goodsData.page++
				this.getProduct(true);

			},
			getCateLst() {
				customeApi.cateList({}).then(res => {
					if (res.code === 1) {
						this.cateLstData = res.data.cateLst
						// res.data.cateLst.map(item => {
						//   // item.child.map(cate => {
						//   //   this.cateLstData.data.push(cate)
						//   // })
						//   for (let index in item.child){
						//     this.cateLstData.push(item.child[index])
						//   }
						// })

					} else {
						this.$utils.showErr({
							title: res.msg
						})
					}
				})
			},
			getBrandList() {
				customeApi.brandList({}).then(res => {
					if (res.code === 1) {
						this.brandLstData = res.data;
						this.brandLstData.LstStore.map((item, index) => {
							if (!this.sortListData.includes(item.sort)) {
								this.sortListData.push(item.sort)
							}
						})
					} else {
						this.$utils.showErr({
							title: res.msg
						})
					}
				})
			},
			getProduct(paging) {
				if (!paging) {
					this.goodsData.page = 1
				}
				customeApi.product({
					keyword: this.keyword,
					order_type: this.priceData.val,
					minPrice: this.minPrice,
					maxPrice: this.maxPrice,
					store_id_lst: this.goodsData.store_id.join(','),
					cate_id_lst: this.goodsData.cateOne_id.join(','),
					page: this.goodsData.page,
					pagesize: this.goodsData.pagesize
				}).then(res => {
					if (res.code == 1) {
						if (this.goodsData.page * this.goodsData.pagesize >= res.data.count) {
							this.goodsData.noMore = true;
						} else {
							this.goodsData.noMore = false;
						}
						if (paging) {
							res.data.data.map(item => {
								this.goodsData.data.push(item);
							});
						} else {
							this.goodsData.data = res.data.data
						}
						this.goodsData.status = 2;
					} else {
						this.goodsData.status = 3;
						this.$utils.showErr({
							title: res.msg
						})
					}
				})
			},
			scrolltolower() {
				if (this.goodsData.noMore) {
					return false;
				}
				this.goodsData.page++
				this.getProduct(true);

			}
		}
	}
</script>

<style lang="scss">
	.shopList {
		background: #F9FAFC;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;

		.brandDrawerBody {
			width: 100%;
			height: 100%;
			position: relative;
			display: flex;
			flex-direction: column;

			.brandDrawerTitle {
				width: 100%;
				text-align: center;
				font-weight: 600;
				font-size: 32rpx;
				color: #333;
			}

			.brandListBox {
				overflow: hidden;
			}

			.brandBtnBox {
				width: 100%;
				display: flex;
				line-height: 72rpx;
				text-align: center;
				margin: 50rpx 0;

				.b1 {
					flex: 1;
					float: left;
					color: #505050;
					background: #F5F5F5;
					border-radius: 8rpx;
					margin: 0 24rpx;
				}

				.b2 {
					margin-right: 20rpx;
					flex: 1;
					color: #fff;
					float: right;
					height: 36px;
					background: #C3AB7C;
					border-radius: 8rpx;
				}
			}

			.letterBox {

				height: 100%;
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: #000000;
				position: fixed;
				right: 15rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				z-index: 8;
			}

			.brandList {
				width: 660rpx;

				.letter {
					height: 70rpx;
					line-height: 70rpx;
					text-indent: 24rpx;
					background: #F8F8F8;
					color: #0A0605;
					font-weight: 500;
					font-size: 26rpx;
				}

				.brandBox {
					display: flex;
					align-items: center;
					height: 140rpx;
					border-bottom: 1rpx solid #F5F5F5;

					.icon {
						&.active {
							background: #C3AB7C;
						}

						margin: 0 24rpx;
						width: 36rpx;
						height: 36rpx;
						line-height: 36rpx;
						font-size: 24rpx;
						text-align: center;
						background: #FFFFFF;
						color: #fff;
						border: 1rpx solid #D8D8D8;
						border-radius: 50%;
					}

					image {
						width: 84rpx;
						height: 84rpx;
						margin-right: 24rpx;
					}

					text {
						font-weight: 400;
						font-size: 26rpx;
						color: #0A0605;
					}
				}
			}
		}

		cl-filter-bar {
			padding-bottom: 14rpx;
			//overflow: hidden;
		}

		.cl-filter-item {
			border-radius: 28rpx 28rpx 0 0;

			.screenImg {
				width: 32rpx;
				display: inline-block;
			}

			&.active {
				color: #A98F68;
			}
		}

		.tips {
			line-height: 80rpx;
			text-align: center;
			color: #000000;
			font-size: 26rpx;
		}

		.title {
			display: flex;
			width: 100%;
			height: 88rpx;
			background: #F6F7FB;
			align-items: center;

			.iconhuaban73 {
				font-size: 36rpx;
				color: #333333;
				padding: 0 20rpx;
			}

			.serch {
				display: flex;
				align-items: center;
				width: 422rpx;
				height: 62rpx;
				background: #FFFFFF;
				border-radius: 34rpx;

				.iconhuaban18 {
					font-size: 32rpx;
					color: #939393;
					padding: 0 20rpx 0 10rpx;
				}

			}
		}

		.screen {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 114rpx;
			background: #FFFFFF;
			color: #333333;
			font-size: 24rpx;
			border-radius: 24rpx 24rpx 0 0;

			.iconhuaban114 {
				font-size: 30rpx;
			}
		}

		.shopItem {
			flex: 1;
			min-height: 0;
			overflow-y: hidden;
			background: #F9FAFC;

			scroll-view {
				width: 100%;
				height: 100%;

			}

			.cell {
				width: 100%;
				display: flex;
				padding: 10rpx 32rpx;
				background: #FFFFFF;
				margin-bottom: 20rpx;


				.col-1 {
					width: 212rpx;
					height: 212rpx;
					border-radius: 8rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.col-2 {
					flex: 1;
					display: flex;
					flex-direction: column;
					padding: 0 28rpx;
					justify-content: space-between;

					.row-1 {
						font-size: 28rpx;
						color: #1A1C20;
						text-overflow: ellipsis;
						display: -webkit-box;
						overflow: hidden;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.row-2 {
						font-size: 22rpx;
						line-height: 32rpx;
						color: #939393;
					}

					.row-3 {
						font-size: 22rpx;
						line-height: 32rpx;
						color: #939393;

						.o_price {
							font-size: 18rpx;
							padding-left: 20rpx;
							text-decoration: line-through;
						}

						.n_price {
							font-size: 32rpx;
							color: #E9423E;
						}
					}
				}

				.col-3 {
					width: 76rpx;
					height: 212rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background: #F9F6F3;
					border: 2px solid #C3AB7C;
					color: #C3AB7C;
					border-radius: 8px;

					.iconfont {
						font-size: 42rpx;
					}
				}
			}
		}

		.screenRight {
			padding: 0 20rpx;

			.price {
				font-size: 28rpx;
				font-weight: 500;
				color: #1A1C20;
			}

			.c_cPrice {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 24rpx;

				input {
					width: 252rpx;
					height: 64rpx;
					background: #F5F5F5;
					border-radius: 4px;
					text-align: center;
				}

				text {
					background: #F5F5F5;
					width: 50rpx;
					height: 7rpx;

				}
			}

			.brand {
				display: flex;
				justify-content: space-between;
				margin-top: 56rpx;
				align-items: center;
				margin-bottom: 20rpx;

				.row-1 {
					font-size: 28rpx;
					font-weight: 500;
					color: #1A1C20;
				}

				.row-2 {
					font-size: 22rpx;
					color: #505050;
				}
			}

			.category {
				justify-content: space-between;
				margin-top: 56rpx;
				align-items: center;
			}

			.brandBtnBox {
				width: 100%;
				display: flex;
				justify-content: space-between;
				line-height: 70rpx;
				text-align: center;
				margin: 40rpx 0;

				.b1 {
					width: 200rpx;
					color: #505050;
					background: #F5F5F5;
					border-radius: 8rpx;
				}

				.b2 {
					width: 400rpx;
					color: #fff;
					background: #C3AB7C;
					border-radius: 8px;
				}
			}

			.brandList {
				display: flex;
				flex-wrap: wrap;

				text {
					&.active {
						border: 1rpx solid #C3AB7C;
						color: #C3AB7C;
					}

					&:nth-child(3n+2) {
						margin-left: 27rpx;
						margin-right: 27rpx;
					}

					border: 1rpx solid #F5F5F5;
					color: #1A1C20;
					font-size: 22rpx;
					display: block;
					width: 196rpx;
					height: 64rpx;
					background: #F5F5F5;
					line-height: 64rpx;
					text-align: center;
					border-radius: 4rpx;
					margin: 10rpx 0;
				}

			}
		}

	}
</style>
